<!--商品详情-->
<template>
  <div class="w store-content">
    <div class="gray-box">
      <div class="gallery-wrapper">
        <div class="gallery">
          <div class="thumbnail">
            <ul>
              <li v-for="(item, i) in small" :key="i" :class="{on:big===item}" @click="big=item">
                <img v-lazy="item" :alt="product.name">
              </li>
            </ul>
          </div>
          <div class="thumb">
            <div class="big">
              <img :src="big" :alt="product.name">
            </div>
          </div>
        </div>
      </div>
      <!--右边-->
      <div class="banner">
        <div class="sku-custom-title">
          <h4>{{ product.name }}</h4>
          <h6>
            <span>{{ product.mainType }}</span>
            <span class="price">
              <em>¥</em><i>{{ product.prices }}</i></span>
          </h6>
        </div>
        <div class="num">
          <span class="params-name">数量</span>
          <buy-num :limit="Number(10)" @edit-num="editNum" />
        </div>
        <div class="buy">
          <y-button
            text="加入购物车"
            class-style="main-btn"
            style="width: 145px;height: 50px;line-height: 48px"
            @btnClick="handleAddCart(product.id,product.prices,product.name,product.image)"
          />
          <y-button
            text="现在购买"
            style="width: 145px;height: 50px;line-height: 48px;margin-left: 20px"
            @btnClick="checkout(product.id)"
          />
        </div>
      </div>
    </div>
    <!--产品信息-->
    <div class="item-info">
      <y-shelf title="产品信息">
        <div slot="content">
          <div v-if="product.content" class="img-item" v-html="product.content" />
          <div v-else class="no-info">
            该产品暂无内容
          </div>
        </div>
      </y-shelf>
    </div>
    <div class="item-info">
      <y-shelf title="推荐产品">
        <div slot="content">
          <div v-if="recommendList.length">

            <div class="goods-box w">
              <mall-goods v-for="(item,i) in recommendList" :key="i" :msg="item" />
            </div>
          </div>
          <div v-else class="no-info">
            该产品暂无推荐信息
          </div>
        </div>
      </y-shelf>
    </div>
  </div>
</template>
<script>
import { productDet, productRec } from '@/api/goods'
import { addCart } from '@/api/cart'
import { mapMutations, mapState } from 'vuex'
import mallGoods from '@/components/mallGoods'
import YShelf from '@/components/shelf'
import BuyNum from '@/components/buynum'
import YButton from '@/components/YButton'
export default {
  components: {
    YShelf, BuyNum, YButton, mallGoods
  },
  data() {
    return {
      productMsg: {},
      small: [],
      big: '',
      product: {},
      productNum: 1,
      recommendList: []
    }
  },
  computed: {
    ...mapState(['login', 'showMoveImg', 'showCart'])
  },
  watch: {
    // when query change , reload data
    $route(to, from) {
      const id = to.query.productId
      this.fetchProductDet(id)
      this.fetchProductRec(id)
    }
  },
  created() {
    const id = this.$route.query.productId
    this.fetchProductDet(id)
    this.fetchProductRec(id)
  },
  methods: {
    ...mapMutations(['ADD_CART', 'ADD_ANIMATION', 'SHOW_CART']),
    fetchProductRec(productId) {
      productRec({ productId }).then(res => {
        console.log(res)
        this.recommendList = res.data
      })
    },
    fetchProductDet(productId) {
      productDet({ productId }).then(res => {
        const result = res.data
        this.product = result
        this.small = [result.image, result.image]
        this.big = this.small[0]
      })
    },
    handleAddCart(id, price, name, img) {
      if (!this.showMoveImg) { // 动画是否在运动
        if (this.login) { // 登录了 直接存在用户名下
          addCart({
            productId: id,
            productNum: this.productNum,
            productName: name,
            productImg: img,
            productPrice: price
          }).then(res => {
            // 并不重新请求数据
            this.ADD_CART({
              productId: id,
              productPrice: price,
              productName: name,
              productImg: img,
              productNum: this.productNum
            })
          })
        } else { // 未登录 vuex
          this.ADD_CART({
            productId: id,
            productPrice: price,
            productName: name,
            productImg: img,
            productNum: this.productNum
          })
        }
        // 加入购物车动画
        var dom = event.target
        // 获取点击的坐标
        const elLeft = dom.getBoundingClientRect().left + (dom.offsetWidth / 2)
        const elTop = dom.getBoundingClientRect().top + (dom.offsetHeight / 2)
        // 需要触发
        this.ADD_ANIMATION({ moveShow: true, elLeft: elLeft, elTop: elTop, img: img })
        if (!this.showCart) {
          this.SHOW_CART({ showCart: true })
        }
      }
    },
    checkout(productId) {
      console.log(productId)
      this.$router.push({ path: '/checkout', query: { productId, num: this.productNum }})
    },
    editNum(num) {
      this.productNum = num
    }
  }

}
</script>
<style lang="scss" scoped>
  @import "../../assets/style/mixin";
  .goods-box {
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }
  .store-content {
    clear: both;
    width: 1220px;
    min-height: 600px;
    padding: 0 0 25px;
    margin: 0 auto;
  }

  .gray-box {
    display: flex;
    padding: 60px;
    margin: 20px 0;
    .gallery-wrapper {
      .gallery {
        display: flex;
        width: 540px;
        .thumbnail {
          li:first-child {
            margin-top: 0px;
          }
          li {
            @include wh(80px);
            margin-top: 10px;
            padding: 12px;
            border: 1px solid rgba(0, 0, 0, .06);
            border-radius: 5px;
            cursor: pointer;
            &.on {
              padding: 10px;
              border: 3px solid rgba(0, 0, 0, .2);
            }
            img {
              display: block;
              @include wh(100%);
            }
          }
        }
        .thumb {
          .big {
            margin-left: 20px;
          }
          img {
            display: block;
            @include wh(440px)
          }
        }
      }
    }
    // 右边
    .banner {
      width: 450px;
      margin-left: 10px;
      h4 {
        font-size: 24px;
        line-height: 1.25;
        color: #000;
        margin-bottom: 13px;
      }
      h6 {
        font-size: 14px;
        line-height: 1.5;
        color: #bdbdbd;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .sku-custom-title {
        overflow: hidden;
        padding: 8px 8px 18px 10px;
        position: relative;
      }
      .params-name {
        padding-right: 20px;
        font-size: 14px;
        color: #8d8d8d;
        line-height: 36px;
      }
      .num {
        padding: 29px 0 8px 10px;
        border-top: 1px solid #ebebeb;
        display: flex;
        align-items: center;
      }
      .buy {
        position: relative;
        border-top: 1px solid #ebebeb;
        padding: 30px 0 0 10px;
      }
    }
  }

  .item-info {

    .gray-box {
      padding: 0;
      display: block;
    }
    .img-item {
      width: 1220px;
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }

  .no-info {
    padding: 200px 0;
    text-align: center;
    font-size: 30px;
  }

  .price {
    display: block;
    color: #d44d44;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    i {
      padding-left: 2px;
      font-size: 24px;
    }
  }
</style>
